<template>
	<div class="views-user-list">
		<v-data-table :mobile-breakpoint="0" mobile-breakpointdense class="elevation-1" :items="data.list" :options="data.options" @update:options="data.update($event)" :headers="headers" :server-items-length="data.total" :loading="data.loading" hide-default-footer>
			<template v-slot:top>
				<v-toolbar flat color="white">
					<v-toolbar-title>{{name}}</v-toolbar-title>
					<v-spacer></v-spacer>
					<v-btn color="primary" @click="onAdd()" class="ml-2">添加</v-btn>
					<v-btn color="success" @click="data.search()" class="ml-2">搜索</v-btn>
				</v-toolbar>
			</template>
			<template v-slot:item.token="{item}">
				<span>{{item.id}}:{{item.token}}</span>
			</template>
			<template v-slot:item.tools="{item}">
				<v-btn small text color="primary" :to="`/channel/${item.id}:${item.token}`">用户列表</v-btn>
				<v-btn small text color="success" @click="send_dialog=item">测试</v-btn>
				<v-btn small text color="error" @click="del(item)">删除</v-btn>
			</template>
			<template v-slot:footer v-if="data.totalPage>1">
				<v-divider></v-divider>
				<i-page class="pa-2" circle :value="data.options.page-1" @input="data.options.page=$event+1" :total="data.total"></i-page>
			</template>
		</v-data-table>
		
		<i-modal :open.sync="add_dialog">
			<div class="form-dialog">
				<i-input flex v-model="body.name" label="推送任务名称" :counter="32" :rules="[v=>v.length<=32||'长度最多32']" autofocus></i-input>
				<i-input flex v-model="body.token" label="推送密钥" :counter="32" :rules="[v=>v.length<=32||'长度最多32']"></i-input>
				<div class="tar" style="margin-top: 1rem;">
					<i-button class="blue depth-1" @click="submit">确定</i-button>
				</div>
			</div>
		</i-modal>
		<i-modal :open.sync="send_dialog">
			<div class="form-dialog">
				<i-input flex v-model="sendData.group" label="推送分组" :counter="256" :rules="[v=>v.length<=32||'长度最多32']" autofocus></i-input>
				<i-input flex v-model="sendData.text" label="推送内容" :counter="256" :rules="[v=>v.length<=256||'长度最多256']" autofocus></i-input>
				<i-input flex v-model="sendData.url" label="推送链接" :counter="512" :rules="[v=>v.length<=512||'长度最多512']"></i-input>
				<div class="tar" style="margin-top: 1rem;">
					<i-button class="blue depth-1" @click="send(send_dialog)">确定</i-button>
				</div>
			</div>
		</i-modal>
	</div>
</template>
<script>
export default {
	props: {
		name: String,
	},
	data() {
		return {
			s: {

			},
			add_dialog: false,
			send_dialog: false,
			body: { name: '', token: '' },
			sendData: { group: '', text: '', url: '' },
			data: new utils.DataSource(this.query),
		}
	},
	computed: {
		headers() {
			return [{
				value: "id",
				text: "#",
			}, {
				value: "name",
				text: "推送标题",
			}, {
				value: "token",
				text: "密钥",
			}, {
				value: "tools",
				text: '操作',
			}]
		}
	},
	methods: {
		query(query) {
			return this.$get('channel/list', query)
		},
		onAdd() {
			delete this.body.id;
			this.body.token = utils.randomString(32);
			this.add_dialog = true;
		},
		onEdit(item) {
			this.body = Object.assign({}, item);
			this.add_dialog = true;
		},
		async del(item) {
			if (await ivue.confirm('你确定要删除吗？').then(x => false, () => true)) return;
			await this.$get('channel/del', { id: item.id })
			this.$toast.success('删除成功');
			this.data.search();
		},
		async submit() {
			let data = await this.$post('channel/add', this.body);
			this.data.search();
			this.add_dialog = false;
		},
		async send(item) {
			let ret = await this.$get('channel/push', Object.assign({ id: item.id + ':' + item.token }, this.sendData))
			this.send_dialog = false;
			this.$toast.success(`推送${ret.n}人`)
		}
	},
	mounted() {

	},
	components: {

	},
}
</script>
<style lang="less">
@import "~@/styles/define.less";
.views-user-list {
	padding: 1rem;
	max-width: 50rem;
	margin: 0 auto;
}
</style>
